import React, { useState } from 'react';
import { Card, Table, Button, Space, Tag, Input, Switch, Form, Modal, InputNumber, Select, Tabs } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, CopyOutlined } from '@ant-design/icons';
import './index.less';

const { Option } = Select;
const { TabPane } = Tabs;

const PatientRules: React.FC = () => {
  const [activeTab, setActiveTab] = useState('1');
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();

  // 匹配规则表格列配置
  const matchColumns = [
    {
      title: '规则ID',
      dataIndex: 'id',
      key: 'id',
      width: 80,
    },
    {
      title: '规则名称',
      dataIndex: 'name',
      key: 'name',
      width: 150,
    },
    {
      title: '规则描述',
      dataIndex: 'description',
      key: 'description',
      width: 200,
    },
    {
      title: '匹配字段',
      dataIndex: 'fields',
      key: 'fields',
      width: 250,
      render: (fields) => (
        <>
          {fields.map(field => (
            <Tag key={field}>{field}</Tag>
          ))}
        </>
      ),
    },
    {
      title: '阈值',
      dataIndex: 'threshold',
      key: 'threshold',
      width: 100,
    },
    {
      title: '是否启用',
      dataIndex: 'enabled',
      key: 'enabled',
      width: 100,
      render: (enabled) => (
        <Switch checked={enabled} />
      ),
    },
    {
      title: '优先级',
      dataIndex: 'priority',
      key: 'priority',
      width: 80,
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => setVisible(true)}><EditOutlined /> 编辑</a>
          <a><CopyOutlined /> 复制</a>
          <a><DeleteOutlined /> 删除</a>
        </Space>
      ),
    },
  ];

  // 权重规则表格列配置
  const weightColumns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: 80,
    },
    {
      title: '字段名称',
      dataIndex: 'fieldName',
      key: 'fieldName',
      width: 150,
    },
    {
      title: '字段描述',
      dataIndex: 'description',
      key: 'description',
      width: 200,
    },
    {
      title: '匹配算法',
      dataIndex: 'algorithm',
      key: 'algorithm',
      width: 150,
    },
    {
      title: '完全匹配权重',
      dataIndex: 'exactWeight',
      key: 'exactWeight',
      width: 120,
    },
    {
      title: '部分匹配权重',
      dataIndex: 'partialWeight',
      key: 'partialWeight',
      width: 120,
    },
    {
      title: '不匹配权重',
      dataIndex: 'unmatchWeight',
      key: 'unmatchWeight',
      width: 120,
    },
    {
      title: '是否启用',
      dataIndex: 'enabled',
      key: 'enabled',
      width: 100,
      render: (enabled) => (
        <Switch checked={enabled} />
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a><EditOutlined /> 编辑</a>
          <a><DeleteOutlined /> 删除</a>
        </Space>
      ),
    },
  ];

  // 匹配规则数据
  const matchData = [
    {
      key: '1',
      id: 'R001',
      name: '精确匹配规则',
      description: '身份证号完全匹配',
      fields: ['身份证号'],
      threshold: '100%',
      enabled: true,
      priority: 1,
    },
    {
      key: '2',
      id: 'R002',
      name: '基本信息匹配规则',
      description: '姓名、性别、出生日期组合匹配',
      fields: ['姓名', '性别', '出生日期'],
      threshold: '90%',
      enabled: true,
      priority: 2,
    },
    {
      key: '3',
      id: 'R003',
      name: '联系方式匹配规则',
      description: '姓名、手机号组合匹配',
      fields: ['姓名', '手机号'],
      threshold: '85%',
      enabled: true,
      priority: 3,
    },
    {
      key: '4',
      id: 'R004',
      name: '地址匹配规则',
      description: '姓名、家庭地址组合匹配',
      fields: ['姓名', '家庭地址'],
      threshold: '75%',
      enabled: false,
      priority: 4,
    },
  ];

  // 权重规则数据
  const weightData = [
    {
      key: '1',
      id: 'W001',
      fieldName: '姓名',
      description: '患者姓名',
      algorithm: '音同算法',
      exactWeight: 30,
      partialWeight: 15,
      unmatchWeight: -10,
      enabled: true,
    },
    {
      key: '2',
      id: 'W002',
      fieldName: '身份证号',
      description: '身份证号码',
      algorithm: '精确匹配',
      exactWeight: 100,
      partialWeight: 0,
      unmatchWeight: -100,
      enabled: true,
    },
    {
      key: '3',
      id: 'W003',
      fieldName: '性别',
      description: '患者性别',
      algorithm: '精确匹配',
      exactWeight: 10,
      partialWeight: 0,
      unmatchWeight: -10,
      enabled: true,
    },
    {
      key: '4',
      id: 'W004',
      fieldName: '出生日期',
      description: '患者出生日期',
      algorithm: '日期容差匹配',
      exactWeight: 25,
      partialWeight: 10,
      unmatchWeight: -5,
      enabled: true,
    },
    {
      key: '5',
      id: 'W005',
      fieldName: '手机号',
      description: '联系电话',
      algorithm: '精确匹配',
      exactWeight: 40,
      partialWeight: 0,
      unmatchWeight: -5,
      enabled: true,
    },
  ];

  const handleOk = () => {
    form.validateFields().then(values => {
      console.log('Values:', values);
      setVisible(false);
      form.resetFields();
    }).catch(info => {
      console.log('Validate Failed:', info);
    });
  };

  const handleCancel = () => {
    setVisible(false);
    form.resetFields();
  };

  return (
    <div className="patient-rules-container">
      <Card bordered={false} title="主索引规则配置">
        <Tabs activeKey={activeTab} onChange={setActiveTab}>
          <TabPane tab="匹配规则" key="1">
            <div className="table-top">
              <Button type="primary" icon={<PlusOutlined />} onClick={() => setVisible(true)}>
                新增匹配规则
              </Button>
              <Input.Search
                placeholder="请输入规则名称"
                allowClear
                enterButton="搜索"
                style={{ width: 300 }}
              />
            </div>
            <Table 
              columns={matchColumns} 
              dataSource={matchData} 
              pagination={{ 
                pageSize: 10,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `共 ${total} 条`
              }}
            />
          </TabPane>
          <TabPane tab="权重配置" key="2">
            <div className="table-top">
              <Button type="primary" icon={<PlusOutlined />}>
                新增权重规则
              </Button>
              <Input.Search
                placeholder="请输入字段名称"
                allowClear
                enterButton="搜索"
                style={{ width: 300 }}
              />
            </div>
            <Table 
              columns={weightColumns} 
              dataSource={weightData} 
              pagination={{ 
                pageSize: 10,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `共 ${total} 条`
              }}
            />
          </TabPane>
        </Tabs>
      </Card>

      <Modal
        title="匹配规则配置"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        width={700}
      >
        <Form
          form={form}
          layout="vertical"
          name="rule_form"
          initialValues={{
            enabled: true,
            priority: 5,
          }}
        >
          <Form.Item
            name="name"
            label="规则名称"
            rules={[{ required: true, message: '请输入规则名称' }]}
          >
            <Input placeholder="请输入规则名称" />
          </Form.Item>

          <Form.Item
            name="description"
            label="规则描述"
            rules={[{ required: true, message: '请输入规则描述' }]}
          >
            <Input.TextArea rows={2} placeholder="请输入规则描述" />
          </Form.Item>

          <Form.Item
            name="fields"
            label="匹配字段"
            rules={[{ required: true, message: '请选择匹配字段' }]}
          >
            <Select
              mode="multiple"
              placeholder="请选择匹配字段"
              style={{ width: '100%' }}
            >
              <Option value="身份证号">身份证号</Option>
              <Option value="姓名">姓名</Option>
              <Option value="性别">性别</Option>
              <Option value="出生日期">出生日期</Option>
              <Option value="手机号">手机号</Option>
              <Option value="家庭地址">家庭地址</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="threshold"
            label="匹配阈值"
            rules={[{ required: true, message: '请输入匹配阈值' }]}
          >
            <InputNumber
              min={0}
              max={100}
              formatter={value => `${value}%`}
              parser={value => value.replace('%', '')}
              style={{ width: '100%' }}
            />
          </Form.Item>

          <Form.Item
            name="priority"
            label="规则优先级"
            rules={[{ required: true, message: '请输入规则优先级' }]}
          >
            <InputNumber min={1} max={10} style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item
            name="enabled"
            label="是否启用"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default PatientRules; 
